// @import url('@/assets/styles/font.less');

.bookpage {
  min-height: 100vh;
  background-color: #eef0e9;
  position: relative;
  .backicon {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    left: 40rpx;
    margin-top: 10rpx;
    z-index: 100;
  }
  .toptitle {
    width: 304rpx;
    height: 68rpx;
    margin-top: 12rpx;
    transform: scale(0.8);
    position: fixed;
    left: calc(50% - 152rpx);
  }
  .tip_p1 {
    position: absolute;
    top: 400rpx;
    left: 55rpx;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 50rpx;
    color: #2e7a28;
    line-height: 98rpx;
    text-align: center;
    width: 640rpx;
    margin: auto;
    animation: upshow 1s;
  }
  .tip_p1_hide {
    animation: uphiden 1s;
    opacity: 0;
  }
  .fanshu_btn {
    position: absolute;
    bottom: 300rpx;
    left: 55rpx;
    width: 640rpx;
    height: 120rpx;
    background: #2e7a28;
    border-radius: 60rpx;
    color: #fff;
    font-size: 40rpx;
    font-weight: 500;
    line-height: 120rpx;
    text-align: center;
    margin: 40rpx auto;
    animation: downshow 1s;
  }
  .fanshu_btn_hide {
    animation: downhiden 1s;
    opacity: 0;
  }
  .tip_p2 {
    position: absolute;
    top: 400rpx;
    left: 55rpx;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 50rpx;
    color: #2e7a28;
    line-height: 98rpx;
    width: 640rpx;
    margin: auto;
    opacity: 0;
  }
  .tip_p2_hiden {
    animation: uphiden 1s;
    opacity: 0;
  }
  .tip_p2_show {
    animation: upshow 2s;
    opacity: 1;
  }
  .tip_p3 {
    position: absolute;
    top: 600rpx;
    left: 55rpx;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 32rpx;
    color: #4f934b;
    line-height: 48rpx;
    text-align: left;
    width: 640rpx;
    margin: auto;
    opacity: 0;
  }
  .tip_p3_hiden {
    animation: uphiden 1s;
    opacity: 0;
  }
  .tip_p3_show {
    animation: upshow 2s;
    opacity: 1;
  }
  .tip_p4 {
    position: absolute;
    top: 700rpx;
    left: 55rpx;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 42rpx;
    color: #4f934b;
    line-height: 48rpx;
    text-align: center;
    width: 640rpx;
    margin: auto;
    opacity: 0;
  }
  .tip_p4_hiden {
    animation: uphiden 1s;
    opacity: 0;
  }
  .tip_p4_show {
    animation: upshow 2s;
    opacity: 1;
  }
  .tip_p5 {
    position: absolute;
    top: 600rpx;
    left: 55rpx;
    font-family: 'PingFangSC,PingFang SC';
    font-size: 32rpx;
    color: #4f934b;
    line-height: 48rpx;
    text-align: left;
    width: 640rpx;
    margin: auto;
    opacity: 0;
  }
  .tip_p5_hiden {
    animation: uphiden 1s;
    opacity: 0;
  }
  .tip_p5_show {
    animation: upshow 2s;
    opacity: 1;
  }

  .wen_btn {
    position: absolute;
    bottom: 300rpx;
    left: 55rpx;
    width: 640rpx;
    height: 120rpx;
    background: #2e7a28;
    border-radius: 60rpx;
    color: #fff;
    font-size: 40rpx;
    font-weight: 500;
    line-height: 120rpx;
    text-align: center;
    margin: 40rpx auto;
    opacity: 0;
  }
  .wen_btn_show {
    animation: downshow 2s;
    opacity: 1;
  }
  .wen_btn_hide {
    animation: downhiden 1s;
    opacity: 0;
  }
  .input {
    width: 640rpx;
    border-bottom: 2px solid #2e7a28;
    margin: 0 auto;
    position: absolute;
    top: 800rpx;
    left: 55rpx;
    color: #4f934b;
    line-height: 64rpx;
    height: 64rpx;
    font-size: 32rpx;
  }
  .input-placeholder {
    color: #4f934b;
    opacity: 0.5;
  }
  .aijiedu {
    text-align: center;
    position: absolute;
    bottom: 260rpx;
    left: 55rpx;
    width: 640rpx;
    color: #4f934b;
    // 下划线
    text-decoration: underline;
    font-size: 36rpx;
  }
}

@keyframes upshow {
  0% {
    transform: translateY(-30rpx);
    opacity: 0;
  }
  50% {
    transform: translateY(-30rpx);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes downshow {
  0% {
    transform: translateY(30rpx);
    opacity: 0;
  }
  50% {
    transform: translateY(30rpx);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes uphiden {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30rpx);
    opacity: 0;
  }
  
}
@keyframes downhiden {
  
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(30rpx);
    opacity: 0;
  }
}